import React from 'react';
import {Form, Input, Button, Modal, Message, Breadcrumb, Icon, Table } from 'antd';
import ManualRegistModal from './manualRegistModal';
import RegistHistoryModal from './registHistoryModal';
const FormItem = Form.Item;

let detail = React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10
      },
      visibleManualRe:false,
      visibleReHistory:false,
      selectedrecord:{}
    }
  },

  componentDidMount() {
    this.handleSearch()
  },
  //手工登记弹窗
  showModalManualRe(){
      var record=this.props.location.state.record;
      var funderBillId=record.id;
      this.setState({
          visibleManualRe:true,
          funderBillId:funderBillId
      })
  },
  //登记历史弹窗
  showModalReHistory(){
      var record=this.props.location.state.record;
      var funderBillId=record.id;
      this.setState({
          visibleReHistory:true,
          funderBillId:funderBillId
      })
  },
  hideModal(e) {
    this.setState({
        visibleManualRe: false,
        visibleReHistory: false,
    });
  },
  handleTableChange(pagination) {
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager
    });
    this.fetch();
  },

  fetch() {
    var record=this.props.location.state.record;
    var funderBillId=record.id;
    let page = this.state.pagination.current;
    let params = Object.assign({}, {pageSize: 10, currentPage: page,funderBillId:funderBillId})
    let _me = this
    Utils.sendAjax({
      url: '/funder/bill/detail',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code == '200') {
          _me.setState({
            data: result.data,
            pagination: result.page
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },

  handleSearch() {
    this.setState({
      pagination: {
        current: 1
      }
    })
    this.fetch();
  },
  handleReset() {
    this.props.form.resetFields();
  },
  rowKey(data) {
    return data.tenementId;
  },

  handleClick() {
      history.go(-1);
  },
  onRowClick(record) {
      this.setState({
          selectedrecord: record
      });
  },
  render() {
    const { getFieldProps } = this.props.form;
    var me=this;
    var state=this.state;
    const columns = [
      {
        title: '房源地址',
        dataIndex: 'address',
      },
      {
        title: '物业名称',
        dataIndex: 'tenementName'
      },
      {
        title: '业主姓名',
        dataIndex: 'ownerName'
      },
      {
        title: '业主联系方式',
        dataIndex: 'ownerPhone'
      },
      {
        title: '房东姓名',
        dataIndex: 'realName'
      },
      {
        title: '联系方式',
        dataIndex: 'mobilePhone'
      },
      {
        title: '应收租客金额(元)',
        dataIndex: 'collectRentTotal'
      },
      {
        title: '实收租客金额(元)',
        dataIndex: 'receiveRentTotal'
      },
      {
       title: '操作',
       render: (text, record) => {
         return (
           <div>
             <a href="javascript:;" onClick={me.showModalManualRe.bind(me, '手工登记', true) }>手工登记</a>&nbsp; |&nbsp;
             <a href="javascript:;" onClick={me.showModalReHistory.bind(me, '登记历史', true) }>登记历史</a>
           </div>
         )
       }
      },
    ];
    var hasSelected = this.state.selectedrecord.id ? true : false;
    return (
        <div>
            <div className="nav-bar">
                <Breadcrumb separator="-" >
                    <Breadcrumb.Item>台账详情信息</Breadcrumb.Item>
                </Breadcrumb>
                <Button type="primary" className="returnList" onClick={this.handleClick} style={{marginLeft:-50}}>返回</Button>
            </div>
            <Table rowKey={this.rowKey} columns={columns}
              dataSource={state.data}
              onChange={this.handleTableChange}
              className="tableContainer"
              pagination={state.pagination}
              onRowClick={this.onRowClick}/>
            {state.visibleManualRe ?
              <ManualRegistModal
                ref="ManualRegistModal"
                funderBillId={state.funderBillId}
                visible={state.visibleManualRe}
                hideModal={this.hideModal}
                selectedrecord={state.selectedrecord}/> : null
            }
            {state.visibleReHistory ?
              <RegistHistoryModal
                ref="RegistHistoryModal"
                visible={state.visibleReHistory}
                funderBillId={state.funderBillId}
                hideModal={this.hideModal}
                selectedrecord={state.selectedrecord}/> : null
            }
      </div>
    );
  }
});
detail = Form.create()(detail);
export default detail